<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>海信绿主题动态表格</title>
    <style>
      :root {
        --pj-hisense-green: #00aaa6; /* 海信品牌绿 */
        --pj-hisense-light: #e8f5e9; /* 浅绿背景 */
        --pj-hisense-dark: #00aaa6; /* 深绿强调色 */
      }
      body{
        background-color: #1976d2;
      }
      .pj-body {
        font-family: "Helvetica Neue", Arial, sans-serif;
        background-color: rgba(0, 0, 0, 0.14);
        padding: 30px;
        width: 100vw;
        height: 100vh;
        overflow: scroll;
      }
      .pj-li{
list-style: none;
         padding:4px;   
        }

      .pj-hisense-container {
        width: 60vw;
        margin: 0 auto;
        padding: 30px;
        background-color: #fff;
        border-radius: 15px;
      }

      .pj-hisense-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 6px 20px rgba(0, 168, 98, 0.1);
      }

      .pj-hisense-table thead tr {
        background: linear-gradient(135deg, var(--pj-hisense-green), var(--pj-hisense-dark));
        color: white;
        text-align: left;
        font-size: 12px;
      }

      .pj-hisense-table th {
        padding: 18px 15px;
        font-weight: 600;
        letter-spacing: 0.5px;
        position: relative;
      }

      .pj-hisense-table th:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background: rgba(255, 255, 255, 0.3);
      }

      .pj-hisense-table td {
        padding: 15px;
        border-bottom: 1px solid #e0ece5;
        color: #333;
        font-size: 10px;
      }

      .pj-hisense-table tbody tr:nth-child(even) {
        background-color: var(--pj-hisense-light);
      }

      .pj-hisense-table tbody tr:last-child td {
        border-bottom: none;
      }

      .pj-hisense-table tbody tr:hover {
        background-color: rgba(0, 168, 98, 0.08);
        transition: all 0.3s ease;
      }

      .pj-hisense-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 600;
      }

      .pj-badge-green {
        background-color: rgba(0, 168, 98, 0.15);
        color: var(--pj-hisense-dark);
      }

      .pj-badge-blue {
        background-color: #e3f2fd;
        color: #1976d2;
      }

      .pj-hisense-btn {
        padding: 10px 20px;
        background: var(--pj-hisense-green);
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
        margin-left: 10px;
      }

      .pj-hisense-btn:hover {
        background: var(--pj-hisense-dark);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 168, 98, 0.3);
      }

      .pj-status-active {
        color: var(--pj-hisense-green);
        font-weight: 600;
        position: relative;
        padding-left: 20px;
      }

      .pj-status-active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background: var(--pj-hisense-green);
        border-radius: 50%;
      }

      .pj-status-inactive {
        color: #f44336;
        font-weight: 600;
      }

      .pj-table-caption {
        font-size: 24px;
        color: var(--pj-hisense-dark);
        margin-bottom: 20px;
        font-weight: 600;
        display: flex;
        align-items: center;
      }

      .pj-table-caption::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 24px;
        background: var(--pj-hisense-green);
        margin-right: 12px;
        border-radius: 4px;
      }

      .pj-input-group {
        margin-bottom: 20px;
        display: flex;
      }

      .pj-hisense-input {
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 6px;
        flex-grow: 1;
        font-size: 16px;
        transition: border 0.3s;
      }

      .pj-hisense-input:focus {
        outline: none;
        border-color: var(--pj-hisense-green);
        box-shadow: 0 0 0 2px rgba(0, 168, 98, 0.2);
      }

      .pj-table-footer {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
      }

      .pj-row-input {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-right: 10px;
        width: 100px;
      }

      .pj-score-input {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 80px;
      }
    </style>
  </head>
  <body>
    <div class="pj-body">
      <div class="pj-hisense-container">
        <div class="pj-table-caption">评价标准</div>

        <div class="pj-input-group">
          <input type="text" id="pj-dataInput" class="pj-hisense-input" placeholder="请输入评分" />
          <button id="pj-submitBtn" class="pj-hisense-btn">提交评分</button>
        </div>

        <div id="pj-tableContainer"></div>

        <!-- 新增的获取全部数据按钮 -->
        <div class="pj-table-footer">
          <button id="pj-getAllScoresBtn" class="pj-hisense-btn">获取所有评分</button>
        </div>
      </div>
    </div>

    <script>
      // 默认JSON数据
      const pjDefaultData = {
        columns: [
          { name: "产品ID", width: "15%" },
          { name: "产品名称", width: "25%" },
          { name: "产品类别", width: "15%" },
          { name: "零售价", width: "15%" },
          { name: "库存量", width: "10%" },
          { name: "销售状态", width: "20%" },
          { name: "评分", width: "10%" }  // 新增评分列
        ],
        rows: [
          {
            产品ID: "HS-ULED-75",
            产品名称: "海信ULED 75英寸电视海信ULED 75英寸电视",
            产品类别: "<span class='pj-hisense-badge pj-badge-green'>大家电</span>",
            零售价: "¥9,999",
            库存量: "128",
            销售状态: "<span >热销中</span>",
          },
          {
            产品ID: "HS-AC-18",
            产品名称: "海信变频空调1.5匹",
            产品类别: "<span class='pj-hisense-badge pj-badge-green'>大家电</span>",
            零售价: "¥3,299",
            库存量: "56",
            销售状态: "<span>在售</span>",
          },
          {
            产品ID: "HS-FR-450",
            产品名称: "海信450L十字冰箱",
            产品类别: "<span class='pj-hisense-badge pj-badge-green'>大家电</span>",
            零售价: "¥4,599",
            库存量: "32",
            销售状态: "<span>促销中</span>",
          },
          {
            产品ID: "HS-PJ-2000",
            产品名称: "海信4K激光投影仪",
            产品类别: "<span class='pj-hisense-badge pj-badge-blue'>影音设备</span>",
            零售价: "¥12,999",
            库存量: "8",
            销售状态: "<span>需预订</span>",
          },
          {
            产品ID: "HS-WM-10",
            产品名称: "海信10kg滚筒洗衣机",
            产品类别: "<span class='pj-hisense-badge pj-badge-green'>大家电</span>",
            零售价: "¥2,799",
            库存量: "0",
            销售状态: "<span>缺货</span>",
          },
        ],
      };

      // 当前表格数据

      initPjWindows(pjDefaultData, '产品ID');

      // 封装
      function initPjWindows(data, key) {
    //     const style = `<style>
    //   :root {
    //     --pj-hisense-green: #00aaa6; /* 海信品牌绿 */
    //     --pj-hisense-light: #e8f5e9; /* 浅绿背景 */
    //     --pj-hisense-dark: #00aaa6; /* 深绿强调色 */
    //   }

    //   .pj-body {
    //     font-family: "Helvetica Neue", Arial, sans-serif;
    //     background-color: #c4c4c4;
    //     padding: 30px;
    //     width: 100vw;
    //     height: 100vh;
    //   }
    //     .pj-li{
    //      list-style: none;
    //      padding:4px;   
    //     }
    //   .pj-hisense-container {
    //     width: 60vw;
    //     margin: 0 auto;
    //     padding: 30px;
    //     background-color: #fff;
    //     border-radius: 15px;
    //   }

    //   .pj-hisense-table {
    //     width: 100%;
    //     border-collapse: separate;
    //     border-spacing: 0;
    //     background: white;
    //     border-radius: 12px;
    //     overflow: hidden;
    //     box-shadow: 0 6px 20px rgba(0, 168, 98, 0.1);
    //   }

    //   .pj-hisense-table thead tr {
    //     background: linear-gradient(135deg, var(--pj-hisense-green), var(--pj-hisense-dark));
    //     color: white;
    //     text-align: left;
    //     font-size: 12px;
    //   }

    //   .pj-hisense-table th {
    //     padding: 18px 15px;
    //     font-weight: 600;
    //     letter-spacing: 0.5px;
    //     position: relative;
    //   }

    //   .pj-hisense-table th:not(:last-child)::after {
    //     content: "";
    //     position: absolute;
    //     right: 0;
    //     top: 20%;
    //     height: 60%;
    //     width: 1px;
    //     background: rgba(255, 255, 255, 0.3);
    //   }

    //   .pj-hisense-table td {
    //     padding: 15px;
    //     border-bottom: 1px solid #e0ece5;
    //     color: #333;
    //     font-size: 10px;
    //   }

    //   .pj-hisense-table tbody tr:nth-child(even) {
    //     background-color: var(--pj-hisense-light);
    //   }

    //   .pj-hisense-table tbody tr:last-child td {
    //     border-bottom: none;
    //   }

    //   .pj-hisense-table tbody tr:hover {
    //     background-color: rgba(0, 168, 98, 0.08);
    //     transition: all 0.3s ease;
    //   }

    //   .pj-hisense-badge {
    //     display: inline-block;
    //     padding: 4px 12px;
    //     border-radius: 16px;
    //     font-size: 12px;
    //     font-weight: 600;
    //   }

    //   .pj-badge-green {
    //     background-color: rgba(0, 168, 98, 0.15);
    //     color: var(--pj-hisense-dark);
    //   }

    //   .pj-badge-blue {
    //     background-color: #e3f2fd;
    //     color: #1976d2;
    //   }

    //   .pj-hisense-btn {
    //     padding: 10px 20px;
    //     background: var(--pj-hisense-green);
    //     color: white;
    //     border: none;
    //     border-radius: 6px;
    //     cursor: pointer;
    //     font-weight: 500;
    //     transition: all 0.2s;
    //     margin-left: 10px;
    //   }

    //   .pj-hisense-btn:hover {
    //     background: var(--pj-hisense-dark);
    //     transform: translateY(-1px);
    //     box-shadow: 0 2px 8px rgba(0, 168, 98, 0.3);
    //   }

    //   .pj-status-active {
    //     color: var(--pj-hisense-green);
    //     font-weight: 600;
    //     position: relative;
    //     padding-left: 20px;
    //   }

    //   .pj-status-active::before {
    //     content: "";
    //     position: absolute;
    //     left: 0;
    //     top: 50%;
    //     transform: translateY(-50%);
    //     width: 12px;
    //     height: 12px;
    //     background: var(--pj-hisense-green);
    //     border-radius: 50%;
    //   }

    //   .pj-status-inactive {
    //     color: #f44336;
    //     font-weight: 600;
    //   }

    //   .pj-table-caption {
    //     font-size: 24px;
    //     color: var(--pj-hisense-dark);
    //     margin-bottom: 20px;
    //     font-weight: 600;
    //     display: flex;
    //     align-items: center;
    //   }

    //   .pj-table-caption::before {
    //     content: "";
    //     display: inline-block;
    //     width: 8px;
    //     height: 24px;
    //     background: var(--pj-hisense-green);
    //     margin-right: 12px;
    //     border-radius: 4px;
    //   }

    //   .pj-input-group {
    //     margin-bottom: 20px;
    //     display: flex;
    //   }

    //   .pj-hisense-input {
    //     padding: 10px 15px;
    //     border: 1px solid #ddd;
    //     border-radius: 6px;
    //     flex-grow: 1;
    //     font-size: 16px;
    //     transition: border 0.3s;
    //   }

    //   .pj-hisense-input:focus {
    //     outline: none;
    //     border-color: var(--pj-hisense-green);
    //     box-shadow: 0 0 0 2px rgba(0, 168, 98, 0.2);
    //   }

    //   .pj-table-footer {
    //     margin-top: 20px;
    //     display: flex;
    //     justify-content: flex-end;
    //   }

    //   .pj-row-input {
    //     padding: 8px 12px;
    //     border: 1px solid #ddd;
    //     border-radius: 4px;
    //     margin-right: 10px;
    //     width: 100px;
    //   }

    //   .pj-score-input {
    //     padding: 8px;
    //     border: 1px solid #ddd;
    //     border-radius: 4px;
    //     width: 80px;
    //   }
    // </style>`
    // const dom = `    <div class="pj-body">
    //   <div class="pj-hisense-container">
    //     <div class="pj-table-caption">评价标准</div>

    //     <div class="pj-input-group">
    //       <input type="text" id="pj-dataInput" class="pj-hisense-input" placeholder="请输入评分" />
    //       <button id="pj-submitBtn" class="pj-hisense-btn">提交评分</button>
    //     </div>

    //     <div id="pj-tableContainer"></div>

    //     <!-- 新增的获取全部数据按钮 -->
    //     <div class="pj-table-footer">
    //       <button id="pj-getAllScoresBtn" class="pj-hisense-btn">获取所有评分</button>
    //     </div>
    //   </div>
    // </div>`
    // document.querySelector("body").insertAdjacentHTML('beforeend',dom)
    // document.querySelector("head").insertAdjacentHTML('beforeend',style)
        // 隐藏函数
        function hidden() {
        //   document.querySelector(".pj-body").addEventListener("click", () => {
            document.querySelector(".pj-body").style.display = "none";
        //   });
        }
        
        function show() {
        //   document.querySelector(".pj-body").addEventListener("click", () => {
            document.querySelector(".pj-body").style.display = "block";
        //   });
        }
        
        // 生成表格函数
        function pjGenerateTable(data) {
          let tableHTML = `<table class="pj-hisense-table">
                <thead>
                    <tr>`;

          // 添加表头
          data.columns.forEach((column) => {
            tableHTML += `<th style="width: ${column.width}">${column.name}</th>`;
          });

          tableHTML += `</tr>
                </thead>
                <tbody>`;

          // 添加表格行
          data.rows.forEach((row, index) => {
            tableHTML += `<tr data-row-index="${index}">`;
            data.columns.forEach((column) => {
              if (column.name === "评分") {
                // 如果是评分列，添加输入框
                tableHTML += `<td><input type="text" class="pj-score-input" data-row-id="${row[key]}" placeholder="输入评分"></td>`;
              } else {
                const value = row[column.name] || "";
                tableHTML += `<td>${value}</td>`;
              }
            });
            tableHTML += `</tr>`;
          });

          tableHTML += `</tbody>
            </table>`;

          document.getElementById("pj-tableContainer").innerHTML = tableHTML;
        }

        // 获取所有评分数据
        function pjGetAllScores() {
          const scoreInputs = document.querySelectorAll('.pj-score-input');
          const scores = [];
          
          scoreInputs.forEach(input => {
            scores.push({
              productId: input.getAttribute('data-row-id'),
              score: input.value
            });
          });
          
          return scores;
        }

        // 初始化表格
        pjGenerateTable(data);

        // 提交按钮事件
        document.getElementById("pj-submitBtn").addEventListener("click", function () {
          const input = document.getElementById("pj-dataInput").value.trim();
          try {
            window.$PJ.subBtn();
          } catch (err) {
            alert("当前提交函数未被重写");
          }
        });

        // 获取所有评分按钮事件
        document.getElementById("pj-getAllScoresBtn").addEventListener("click", function() {
          const allScores = pjGetAllScores();
          console.log("所有评分数据：", allScores);
          alert(`已获取 ${allScores.length} 条评分数据，请查看控制台输出！`);
        });

        // 挂载到window.$PJ
        window.$PJ = window.$PJ || {};
        window.$PJ.pjGenerateTable = pjGenerateTable;
        window.$PJ.pjGetAllScores = pjGetAllScores;
        window.$PJ.onShowPj = show;
        window.$PJ.onHiddenPj = hidden;
      }

      // 压缩

    //   function initPjWindows(data,key){const style=`<style>:root{--pj-hisense-green:#00aaa6;--pj-hisense-light:#e8f5e9;--pj-hisense-dark:#00aaa6;}.pj-body{font-family:"Helvetica Neue",Arial,sans-serif;background-color:#c4c4c4;padding:30px;width:100vw;height:100vh;}.pj-li{list-style:none;padding:4px;}.pj-hisense-container{width:60vw;margin:0 auto;padding:30px;background-color:#fff;border-radius:15px;}.pj-hisense-table{width:100%;border-collapse:separate;border-spacing:0;background:white;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,168,98,0.1);}.pj-hisense-table thead tr{background:linear-gradient(135deg,var(--pj-hisense-green),var(--pj-hisense-dark));color:white;text-align:left;font-size:12px;}.pj-hisense-table th{padding:18px 15px;font-weight:600;letter-spacing:0.5px;position:relative;}.pj-hisense-table th:not(:last-child)::after{content:"";position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,0.3);}.pj-hisense-table td{padding:15px;border-bottom:1px solid #e0ece5;color:#333;font-size:10px;}.pj-hisense-table tbody tr:nth-child(even){background-color:var(--pj-hisense-light);}.pj-hisense-table tbody tr:last-child td{border-bottom:none;}.pj-hisense-table tbody tr:hover{background-color:rgba(0,168,98,0.08);transition:all 0.3s ease;}.pj-hisense-badge{display:inline-block;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:600;}.pj-badge-green{background-color:rgba(0,168,98,0.15);color:var(--pj-hisense-dark);}.pj-badge-blue{background-color:#e3f2fd;color:#1976d2;}.pj-hisense-btn{padding:10px 20px;background:var(--pj-hisense-green);color:white;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:all 0.2s;margin-left:10px;}.pj-hisense-btn:hover{background:var(--pj-hisense-dark);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,168,98,0.3);}.pj-status-active{color:var(--pj-hisense-green);font-weight:600;position:relative;padding-left:20px;}.pj-status-active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--pj-hisense-green);border-radius:50%;}.pj-status-inactive{color:#f44336;font-weight:600;}.pj-table-caption{font-size:24px;color:var(--pj-hisense-dark);margin-bottom:20px;font-weight:600;display:flex;align-items:center;}.pj-table-caption::before{content:"";display:inline-block;width:8px;height:24px;background:var(--pj-hisense-green);margin-right:12px;border-radius:4px;}.pj-input-group{margin-bottom:20px;display:flex;}.pj-hisense-input{padding:10px 15px;border:1px solid #ddd;border-radius:6px;flex-grow:1;font-size:16px;transition:border 0.3s;}.pj-hisense-input:focus{outline:none;border-color:var(--pj-hisense-green);box-shadow:0 0 0 2px rgba(0,168,98,0.2);}.pj-table-footer{margin-top:20px;display:flex;justify-content:flex-end;}.pj-row-input{padding:8px 12px;border:1px solid #ddd;border-radius:4px;margin-right:10px;width:100px;}.pj-score-input{padding:8px;border:1px solid #ddd;border-radius:4px;width:80px;}</style>`;const dom=`<div class="pj-body"><div class="pj-hisense-container"><div class="pj-table-caption">评价标准</div><div class="pj-input-group"><input type="text" id="pj-dataInput" class="pj-hisense-input" placeholder="请输入评分" /><button id="pj-submitBtn" class="pj-hisense-btn">提交评分</button></div><div id="pj-tableContainer"></div><div class="pj-table-footer"><button id="pj-getAllScoresBtn" class="pj-hisense-btn">获取所有评分</button></div></div></div>`;document.querySelector("body").insertAdjacentHTML("beforeend",dom);document.querySelector("head").insertAdjacentHTML("beforeend",style);function hidden(){document.querySelector(".pj-body").addEventListener("click",()=>{document.querySelector(".pj-body").style.display="none"})}function show(){document.querySelector(".pj-body").addEventListener("click",()=>{document.querySelector(".pj-body").style.display="block"})}function pjGenerateTable(data){let tableHTML=`<table class="pj-hisense-table"><thead><tr>`;data.columns.forEach(column=>{tableHTML+=`<th style="width: ${column.width}">${column.name}</th>`});tableHTML+=`</tr></thead><tbody>`;data.rows.forEach((row,index)=>{tableHTML+=`<tr data-row-index="${index}">`;data.columns.forEach(column=>{if(column.name==="评分"){tableHTML+=`<td><input type="text" class="pj-score-input" data-row-id="${row[key]}" placeholder="输入评分"></td>`}else{const value=row[column.name]||"";tableHTML+=`<td>${value}</td>`}});tableHTML+=`</tr>`});tableHTML+=`</tbody></table>`;document.getElementById("pj-tableContainer").innerHTML=tableHTML}function pjGetAllScores(){const scoreInputs=document.querySelectorAll(".pj-score-input");const scores=[];scoreInputs.forEach(input=>{scores.push({productId:input.getAttribute("data-row-id"),score:input.value})});return scores}pjGenerateTable(data);document.getElementById("pj-submitBtn").addEventListener("click",()=>{const input=document.getElementById("pj-dataInput").value.trim();try{window.$PJ.subBtn()}catch(err){alert("当前提交函数未被重写")}});document.getElementById("pj-getAllScoresBtn").addEventListener("click",()=>{const allScores=pjGetAllScores();console.log("所有评分数据：",allScores);alert(`已获取 ${allScores.length} 条评分数据，请查看控制台输出！`)});window.$PJ=window.$PJ||{};window.$PJ.pjGenerateTable=pjGenerateTable;window.$PJ.pjGetAllScores=pjGetAllScores;window.$PJ.onShowPj=show;window.$PJ.onHiddenPj=hidden}

    </script>
  </body>
</html>